<template>
  <view class="giftbox-gift-section">
    <giftbox-section
      :category-list="categories"
      :initial-display-count="2"
      @on-category-click="handleCategoryClick"
      @on-expand-change="handleExpandChange"
    />
  </view>
</template>

<script>
import GiftboxSection from './xztdemo8.vue'

export default {
  components: {
    GiftboxSection
  },
  
  data() {
    return {
      categories: [
        {
          id: "887",
          title: "综合礼盒DIY",
          englishTitle: "Comprehensive Gift Box DIY",
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173382446267580fceaf387.png",
          headerImg: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png"
        },
        {
          id: "887",
          title: "综合礼盒DIY",
          englishTitle: "Comprehensive Gift Box DIY",
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173382446267580fceaf387.png",
          headerImg: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png"
        },
        {
          id: "887",
          title: "综合礼盒DIY",
          englishTitle: "Comprehensive Gift Box DIY",
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173382446267580fceaf387.png",
          headerImg: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png"
        },
        {
          id: "887",
          title: "综合礼盒DIY",
          englishTitle: "Comprehensive Gift Box DIY",
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173382446267580fceaf387.png",
          headerImg: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png"
        },
        // ... 其他分类数据
      ]
    }
  },

  methods: {
    handleCategoryClick({ category, index }) {
      console.log('Category clicked:', category, index);
    },

    handleExpandChange(isExpanded) {
      console.log('Expand status changed:', isExpanded);
    }
  }
}
</script>